<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景透明化</title>
    <style>
      body {
        background-color: aqua;
      }
      #img {
        width: 500px;
        height: 500px;
        display: inline-block;
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <img id="img" src="../assets/image/Google Chrome.png" alt="" />
    <canvas width="500" height="500"></canvas>
  </body>
  <script>
    var canvas = document.querySelectorAll("canvas")[0];
    var context = canvas.getContext("2d");
    let img = document.getElementById("img");
    console.log(img);
    img.onload = function () {
      context.drawImage(this, 0, 0, 500, 500);
    };
    canvas.addEventListener("click", (event) => {
      console.log("click",event);

      let ImageDatas = context.getImageData(0, 0, 500, 500);
      ImageDatas.data.map((e, i, s) => {
        if (i % 4 === 0) {
          if (s[i] <= 120 && s[i + 1] <= 120 && s[i + 2] <= 120) {
            s[i + 3] = 0;
          }
        }
      });
      context.putImageData(ImageDatas, 0, 0);
    });
  </script>
</html>
